const { createApp, ref } = Vue;

createApp({
  setup() {
    const board = ref(Array(15).fill().map(() => Array(15).fill(null)));
    const currentPlayer = ref('black');
    const gameOver = ref(false);
    const winner = ref(null);

    function makeMove(row, col) {
      if (gameOver.value || board.value[row][col] !== null) {
        return;
      }
      
      // Make the move
      board.value[row][col] = currentPlayer.value;
      
      // Check for win
      if (checkWin(row, col)) {
        gameOver.value = true;
        winner.value = currentPlayer.value;
      }
      
      // Switch player
      currentPlayer.value = currentPlayer.value === 'black' ? 'white' : 'black';
    }

    function checkWin(row, col) {
      const directions = [
        [[0, 1], [0, -1]],  // 横向
        [[1, 0], [-1, 0]], // 纵向
        [[1, 1], [-1, -1]], // 对角线
        [[-1, 1], [1, -1]]  // 另一条对角线
      ];
      
      for (const [[dx1, dy1], [dx2, dy2]] of directions) {
        let count = 1;
        
        // 检查一个方向
        let x = row + dx1;
        let y = col + dy1;
        while (x >= 0 && x < 15 && y >= 0 && y < 15 && board.value[x][y] === currentPlayer.value) {
          count++;
          x += dx1;
          y += dy1;
        }
        
        // 检查相反方向
        x = row + dx2;
        y = col + dy2;
        while (x >= 0 && x < 15 && y >= 0 && y < 15 && board.value[x][y] === currentPlayer.value) {
          count++;
          x += dx2;
          y += dy2;
        }
        
        if (count >= 5) {
          return true;
        }
      }
      
      return false;
    }

    function resetGame() {
      board.value = Array(15).fill().map(() => Array(15).fill(null));
      currentPlayer.value = 'black';
      gameOver.value = false;
      winner.value = null;
    }

    return {
      board,
      currentPlayer,
      gameOver,
      winner,
      makeMove,
      resetGame
    };
  }
}).mount('#app');